import React,{useEffect} from 'react';
import '../sysStyle/praDetails.css';
import {getArticleList} from '../sysRedux/getAppList';
import {connect} from 'react-redux';
import { Card} from 'antd';
import { FileTextOutlined, DeleteOutlined } from '@ant-design/icons';
//函数
import {delArticle} from '../sysRedux/deleteFile';


const { Meta } = Card;

const Article = (props) => {

    useEffect(() => {
        props.dispatch(getArticleList());
    },[]);

    return(
        props.article.map((item,index)=>(
            <Card
                key={index}
                hoverable
                style={{ width: 300 ,display:'inline-block',margin:'10px'}}
                cover={
                <img
                    alt="example"
                    src={item.image}
                />
                }
                actions={[
                    <FileTextOutlined 
                        onClick={() => { 
                            props.history.push({pathname:'/home/articleDetail',state:item});                                                      
                        }} 
                    />,

                    //有问题，不同id与文章的名字不通
                    <DeleteOutlined onClick={()=>delArticle(item.id)}/>,
                ]}
                
            >

                <Meta
                title={item.title}
                description={item.date}
                />

            </Card>
        ))

        

    )
}

const mapStateToProps = (state) => ({
    article:state.article,
})

export default connect(mapStateToProps)(Article);